<template>
  <div>
    <a-row type="flex" justify="space-between" class="account" align="middle">
      <a-row type="flex" align="middle">
        <a-col>
          <img
            src="http://localhost:8090/images/user/user.jpg"
            width="100"
            height="100"
            class="img"
        /></a-col>
        <a-col class="desc">
          <p class="name">{{ userInfo.name }}</p>
          <p>{{ userInfo.account }}</p>
        </a-col>
      </a-row>
      <a-col><a-icon type="setting" class="setting"/></a-col>
    </a-row>
    <a-menu v-model="currentMenu" mode="horizontal" class="menu">
      <a-menu-item key="collect">
        我收藏的
      </a-menu-item>
      <a-menu-item key="publish">
        我发布的
      </a-menu-item>
    </a-menu>
  </div>
</template>
<script>
export default {
  name: "Account",
  layout: "MainLayout",
  data() {
    return {
      userInfo: {
        name: "",
        account: ""
      },
      currentMenu: ["collect"]
    };
  },
  async asyncData({ $axios }) {
    $axios.setHeader("Authorization", sessionStorage.getItem("token"));
    const res = await $axios.post("/user/getUserByAccount", {
      account: sessionStorage.getItem("account")
    });
    if (res.data.status === 0) {
      return { userInfo: res.data.user };
    }
  }
};
</script>
<style lang="less" scoped>
.account {
  width: 50%;
  background: white;
  padding: 15px;
  margin: 15px auto 0px auto;
  .img {
    object-fit: cover;
    border-radius: 50%;
  }
  .desc {
    .name {
      font-size: 30px;
    }
    margin-left: 10px;
  }
  .desc p {
    margin-bottom: 10px;
  }
  .setting {
    font-size: 20px;
  }
}
.menu {
  width: 50%;
  background: white;
  margin: auto;
  border-top: 1px solid #cccccc;
  /deep/ .ant-menu-item {
    width: 50%;
    text-align: center;
  }
}
</style>
